<template>
	<view>
		<u-navbar :is-back="true" :custom-back="customBack" title="订单详情" :background="navbarBg" :border-bottom="false" ></u-navbar>
		<scroll-view :scroll-x="false" :scroll-y="true" 
					class="no-scroll-bar" :style="'height:'+scrollViewHeight+'px'">
			<!-- 顶部盒子 -->
			<view class="viewbox u-p-30" style="text-align: center;">
				<!-- 待支付 -->
				<template  v-if="orderDetailInfo.payStatus==0">
					<view>
						<text style="font-size: 34rpx;font-weight: bold;">{{formatStatus()}}</text>
					</view> 
					<view class="u-m-t-30 u-m-b-40">
						<view v-if="orderDetailInfo.payCountDown>0">
							剩余支付时间：<u-count-down @end="payCountDownEnd(orderDetailInfo)" :show-hours="false" color="#FF4B64"  :timestamp="orderDetailInfo.payCountDown"></u-count-down>
						</view>
					</view>
					<view class="u-flex u-row-center u-col-center">
						<view class="u-m-r-30">
							<u-button>取消订单</u-button>
						</view>
						<view class="u-m-l-30">
							<u-button type="success">立即支付</u-button>
						</view>
					</view>
				</template>
				<!-- 待发货 -->
				<template  v-if="orderDetailInfo.payStatus==1">
					<view>
						<text style="font-size: 34rpx;font-weight: bold;">{{formatStatus()}}</text>
					</view> 
					<view class="u-m-t-30 u-m-b-40">
						<text>商品正在精心制作中，请耐心等待</text>
					</view>
					<view class="u-flex u-row-center u-col-center">
						<view class="u-m-l-30">
							<u-button type="warning">立即催单</u-button>
						</view>
					</view>
				</template>
				<!-- 已完成 -->
				<template  v-if="orderDetailInfo.payStatus==2">
					<view>
						<text style="font-size: 34rpx;font-weight: bold;">{{formatStatus()}}</text>
					</view> 
					<view class="u-m-t-30 u-m-b-40">
						<text>交易完成，请慢慢享用~</text>
					</view>
					<view class="u-flex u-row-center u-col-center">
						<view class="u-m-r-30">
							<u-button type="success">再来一单</u-button>
						</view>
						<view class="u-m-l-30">
							<u-button>我要评价</u-button>
						</view>
					</view>
				</template>
				<!-- 已取消 -->
				<template  v-if="orderDetailInfo.payStatus==3">
					<view>
						<text style="font-size: 32rpx;font-weight: bold;">{{formatStatus()}}</text>
					</view> 
					<view class="u-m-t-30 u-m-b-40">
						<text>超时未支付，订单已取消</text>
					</view>
					<view class="u-flex u-row-center u-col-center u-m-t-30">
						<view>
							<u-button>重新下单</u-button>
						</view>
					</view>
				</template>
			</view>
			<!-- 订单商品明细 -->
			<view   v-if="orderDetailInfo.goodList.length>0" class="viewbox">
				<view class="u-p-30 u-border-bottom">商品明细</view>
				<view  class="u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-border-bottom">
					<view class="u-p-t-10 u-p-b-10" v-for="(good,index) in orderDetailInfo.goodList" :key="index">
						<u-row>
							<u-col :span="6">
								<view class="u-flex u-row-left u-col-center">
									<view class="u-m-r-20">
										<u-image width="90" height="90" :src="good.url" border-radius="6rpx">
											<u-loading slot="loading"></u-loading>
										</u-image>
									</view>
									<view>
										<view class="u-m-b-20">{{good.goodName}}</view>
										<view v-if="good.skuRules&&good.skuRules.length>0" class="u-m-t-20 u-line-1 u-tips-color u-font-24">{{formatSelectedAtrr(good.skuRules)}}</view>
									</view>
								</view>
							</u-col>
							<u-col :span="6">
									<view style="text-align: right;">
										<view class="u-m-b-20" style="color: #fa3534;">
											<text>¥</text><text>{{good.price}}</text>
										</view>
										<view class="u-m-t-20 u-tips-color u-font-26">
											<text>×</text> <text>{{good.count}}</text>
										</view>
									</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-border-bottom">
					<u-row>
						<u-col :span="6">
							<view  style="text-align: left;">金额</view>
						</u-col>
						<u-col :span="6">
							<view style="text-align: right;color: #fa3534;">
								<text>¥</text><text>{{orderDetailInfo.payAmount}}</text>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>	
			<!-- 订单详情信息 -->	
			<view class="viewbox">
				<view>
					<u-cell-item title="订单号" :value="orderDetailInfo.orderCode" hover-class="none" :arrow="false"></u-cell-item>
				</view>
				<view>
					<u-cell-item title="下单时间" :value="orderDetailInfo.createTime" hover-class="none" :arrow="false"></u-cell-item>
				</view>
				<view>
					<u-cell-item title="联系方式" :value="orderDetailInfo.mobile" hover-class="none" :arrow="false"></u-cell-item>
				</view>
				<view>
					<u-cell-item title="配送方式" :value="orderDetailInfo.deliveryWay==0?'自取':'派送'" hover-class="none" :arrow="false"></u-cell-item>
				</view>
				<view v-if="orderDetailInfo.deliveryWay==0">
					<u-cell-item title="就餐方式" :value="orderDetailInfo.pickUpWay==0?'店内就餐':'打包带走'" hover-class="none" :arrow="false"></u-cell-item>
					<u-cell-item title="取餐时间" :value="formatPickUpTime()" hover-class="none" :arrow="false"></u-cell-item>
				</view>
				<view v-if="orderDetailInfo.deliveryWay==1&&orderDetailInfo.payStatus==2">
					<u-cell-item title="配送时间" value="" hover-class="none" :arrow="false"></u-cell-item>
				</view>
				<view>
					<u-cell-item title="备注" :value="orderDetailInfo.orderRemark?orderDetailInfo.orderRemark:'无'" hover-class="none" :arrow="false"></u-cell-item>
				</view>
			</view>
		</scroll-view>
	</view>	
</template>

<script>
	import {getOrderDetailInfo,changeOrderStatus} from "@/util/data/order.js"; 
	export default {
		data() {
			return {
				scrollViewHeight:0,
				orderId:'',
				orderDetailInfo:"",
			};
		},
		created:function(){
			this.scrollViewHeight=this.globalUtil.getScrollViewHeigh(this)*0.92;	
		},
		onLoad:function(option){
			console.log("====支付订单====",option);
			this.orderId= option.orderId;
			this.getOrderDetail();
		},
		methods:{
			//自定义返回逻辑
			customBack:function(){
				this.$u.route({
					type:'reLaunch',
					url:'/pages/tabbar/order/order',
				})
			},
			//获取订单详情
			getOrderDetail:function(){
				let that=this;
				let orderId=this.orderId;
				if(orderId!=""){
					this.orderDetailInfo= getOrderDetailInfo(orderId);
					console.log("查询订单详情结果",this.orderDetailInfo);
				}
			},
			payCountDownEnd:function(order){
				console.log("订单超时未支付，取消订单");
				this.orderDetailInfo.payStatus=3;
				this.orderDetailInfo.payCountDown=0;
			},
			//修改订单状态 newPayStatus:0待支付 1 待发货 2已完成 3已取消
			formatStatus:function(){
				let that=this;
				let orderStatus= that.orderDetailInfo.payStatus;
				if(orderStatus==0){
					return "待支付";
				}else if(orderStatus==1){
					return "待发货";
				}else if(orderStatus==2){
					return "已完成";
				}else{
					return "订单已取消"
				}
			},
			//格式化选择的规格
			formatSelectedAtrr:function(skuRules){
				let that=this;
				let selectedLabelArr=[];
				if(skuRules&&skuRules.length>0){
					for (let i = 0; i < skuRules.length; i++) {
						  let ruleObj= skuRules[i];
						  let labelArr= ruleObj.attrValues;
						  for (let j = 0; j < labelArr.length; j++) {
						    	let label= labelArr[j].tagLable;
								if(labelArr[j].selected){
									selectedLabelArr.push(label);
								}
								
						  }
					}
					return selectedLabelArr.join("/");
				}
				else{
					return "";
				}
			},
			formatPickUpTime:function(){
				let pickUpTime=this.orderDetailInfo.pickUpTime;
				console.log("pickUpTime=====",pickUpTime);
				if(pickUpTime!=null&&pickUpTime!=undefined){
					return pickUpTime.label;
				}else{
					return "未知";
				}
			}	
		}
	}
</script>

<style lang="scss" scoped>
	.viewbox{
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 30rpx 20rpx;
	}
</style>
